<script setup lang="ts">
import { ref } from 'vue';
import gsap from 'gsap';
import { useInformation } from '@/api/home';

// 渲染列表
const resultList = [
	{
		label: '职员数量',
		icon: 'renyuan',
		color: '#409eff',
		background: '#ecf5ff',
	},
	{
		label: '岗位数量',
		icon: 'wenjianbao',
		color: '#67c23a',
		background: '#f0f9eb',
	},
	{
		label: '权限页面',
		icon: 'quanxian',
		color: '#e6a23c',
		background: '#fdf6ec',
	},
	{
		label: '拥有页面',
		icon: 'jianguan',
		color: '#f56c6c',
		background: '#fef0f0',
	},
];
// 渲染值
let listValue = [0, 0, 0, 0];
const resultValue = ref<number[]>([0, 0, 0, 0]);

// 数字滚动
const initNumCountUp = () => {
	listValue.map((n, i) => gsap.to(resultValue.value, { duration: 1, [i]: n }));
};
// 获取数据
const getInformation = async () => {
	try {
		const { userNum = 0, roleNum = 0, pagesTotal = 0, pagesNum = 0 } = await useInformation();
		listValue = [userNum, roleNum, pagesTotal, pagesNum];
		initNumCountUp();
	} catch {
		throw new Error('公司统计未知异常,请联系开发人员');
	}
};
getInformation();
</script>

<template>
	<div class="statistics">
		<template v-for="(item, i) in resultList" :key="item.label">
			<div class="statistics-item">
				<div class="statistics-left" :class="`home-animation${i + 1}`">
					<div class="statistics-value">
						{{ resultValue[i].toFixed(0) }}
					</div>
					<div class="statistics-label">
						{{ item.label }}
					</div>
				</div>
				<div class="statistics-right">
					<i
						:class="`iconfont icon-${item.icon} home-animation${i + 1}`"
						:style="`background-color: ${item.background};color: ${item.color}`"
					></i>
				</div>
			</div>
		</template>
	</div>
</template>

<style lang="less" scoped>
@import url('./index.less');
</style>
